<template>
  <div class="imgList">
    <myheader title="传智博客 黑马程序员Vue.js"></myheader>

    <van-tabs v-model="active" swipeable sticky>
      <!-- 全部 -->
      <van-tab title="全部">
        <div
          class="content"
          v-for="item in myarrList"
          :key="item.id"
          @click="connews(item.id)"
        >
          <img :src="item.img_url" alt="" />
          <div>
            <h2 v-html="item.title"></h2>
            <p v-html="item.zhaiyao"></p>
          </div>
        </div>
      </van-tab>

      <!-- 遍历栏目数据 -->
      <van-tab :title="cata.title" v-for="cata in cateList" :key="cata.id">
        <div
          class="content"
          v-for="item in postList"
          :key="item.id"
          @click="connews(item.id)"
        >
          <img
            :src="item.img_url"
            alt=""
            @click="
              $router.push({ name: 'imgdetial', params: { id: item.id } })
            "
          />
          <div>
            <h2 v-html="item.title"></h2>
            <p v-html="item.zhaiyao"></p>
          </div>
        </div>
      </van-tab>
    </van-tabs>

    <!-- <a class="top" href="#">TOP</a> -->
    <div class="top" @click="backTop">TOP</div>

    <myfooter></myfooter>
  </div>
</template>

<script>
import { getCateList } from "@/Api/category.js";
import { getpostListByCategory } from "@/Api/post.js";
import myheader from "@/components/myheader.vue";
import myfooter from "@/components/myfooter.vue";
export default {
  components: {
    myheader,
    myfooter,
  },
  data() {
    return {
      active: 0,
      cateList: [],
      postList: [],
      myarrList: [],
    };
  },
  async mounted() {
    //栏目数据
    let res = await getCateList();
    this.cateList = res.data.message;
    // console.log(this.cateList);

    //图片数据
    let id = this.cateList[this.active].id;
    let res2 = await getpostListByCategory(id);
    // console.log(res2);
    this.postList = res2.data.message;

    //全部数据
    let res3 = await getpostListByCategory(0);
    // console.log(res3);
    this.myarrList = res3.data.message;
  },
  methods: {
    connews(id) {
      //   console.log(111);
      this.$router.push({ path: `/imgDetial/${id}` });
      // console.log(id);
    },
    backTop() {
      // document.getElementsByClassName("imgList")[0].scrollTop = 0;
      window.scrollTo(0, 0);
      // console.log(111);
    },
  },
  watch: {
    async active() {
      // console.log(this.active);
      let id = this.cateList[this.active].id;
      let res2 = await getpostListByCategory(id);
      // console.log(res2);
      this.postList = res2.data.message;
      // console.log(this.postList);
    },
  },
};
</script>

<style lang="less" scoped>
body,
html {
  position: relative;
}
.content {
  position: relative;
  width: 100%;
  height: 300px;
  background-color: #ccc;
  // margin-bottom: 10px;
  img {
    width: 100%;
    height: 300px;
  }
  div {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 75px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.486);

    h2 {
      font-weight: 500;
      margin-bottom: 5px;
    }
    p {
      font-size: 14px;
    }
  }
}
.imgList {
  margin-bottom: 50px;
  // margin-top: 41px;
  .top {
    position: fixed;
    right: 20px;
    bottom: 80px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #6cf;
  }
}
</style>